<template>
  <div class="select" @keyup="onKeyup">
    <ElForm :inline="true" style="flex-grow: 1">
      <template v-for="label in labels">
        <template v-if="label">
          <ElFormItem :label="label.label + ':'" :style="{ width: computedWidth(label.formWidth) }"
            v-if="!label.show || label.show({ data, type: 'search', isPhone: false })">
            <component v-if="label.type === 'customize'"
              :is="label.vform({ prop: label.prop as keyof T & string, data, value: data[label.prop as keyof T & string] })">
            </component>
            <component v-else :is="formRender.render(toValue(data), label)"></component>
          </ElFormItem>
          <ElFormItem v-if="Object.keys(instance.labels).length === 1">
            <ElInput placeholder="单个输入框补位，防止自动提交" :display="true" style="opacity: 0; height: 0"></ElInput>
          </ElFormItem>
        </template>
      </template>
    </ElForm>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup generic="T extends Record<string, any>">
import type { ListSearch } from "@b/model/base/list_search"; //组件专属类/用组件就要继承这个类
import { ElForm, ElInput, ElFormItem } from "element-plus";
import { FormRender, computedWidth } from "./render_item"
import { computed, toValue } from "vue";

interface prop {
  instance: ListSearch<T>;
  searchByEnter?: boolean;
}
const { instance, searchByEnter = true } = defineProps<prop>();
const data = computed(() => instance.data);
const formRender = new FormRender<T, keyof T & string>();
const labels = computed(() => toValue(instance.labels));
// const shortcuts = [
//     {
//         text: "这个月",
//         value: () => {
//             const end = new Date();
//             const start = new Date();
//             return [
//                 new Date(start.getFullYear(), start.getMonth() - 1, 26),
//                 new Date(end.getFullYear(), end.getMonth(), 26),
//             ];
//         },
//     },
//     {
//         text: "上个月",
//         value: () => {
//             const end = new Date();
//             const start = new Date();
//             return [
//                 new Date(start.getFullYear(), start.getMonth() - 2, 26),
//                 new Date(end.getFullYear(), end.getMonth() - 1, 26),
//             ];
//         },
//     },
//     {
//         text: "今年全年",
//         value: () => {
//             const end = new Date();
//             const start = new Date(new Date().getFullYear(), 0);
//             return [start, end];
//         },
//     },
//     {
//         text: "过去六个月",
//         value: () => {
//             const end = new Date();
//             const start = new Date();
//             start.setMonth(start.getMonth() - 6);
//             return [start, end];
//         },
//     },
// ];
const onKeyup = (e: KeyboardEvent) => {
  if (!searchByEnter) return;
  if (e.key === "Enter") {
    instance.onSearch();
  }
};
</script>
<style scoped>
.select {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 100%;
  padding: 20px 2%;
  flex-grow: 1;
  background-color: var(--el-bg-color);
}

.el-form .el-form-item {
  margin: 12px 10px;
}

.select>div {
  display: flex;
  align-items: center;
  margin-right: 30px;
}
</style>./form_item_utils
./form_item./render_item